<html>
    <head>
    	<meta charset="utf-8">
    	<title>提示框效果</title>
    	<style type="text/css">
            dl,dt,dd{margin: 0;padding: 0;}
            dl{margin: 0 auto;width: 100px;background: #FAFAFA;font-size: 12px;padding: 10px;border: 1px #000 solid; border-radius: 10px;}
            dt{border-bottom: 1px solid #000;line-height: 40px;}
    	</style>
    </head>
    <body>
        <dl>
        	<dt><input type="checkbox" id="checkAll"/><span>全选</span><a href="javascript:;">反选</a></dt>
        	<dd>
        		<p><input type="checkbox" name="item"/>选项（一）</p>
        		<p><input type="checkbox" name="item"/>选项（二）</p>
        		<p><input type="checkbox" name="item"/>选项（三）</p>
        		<p><input type="checkbox" name="item"/>选项（四）</p>
        		<p><input type="checkbox" name="item"/>选项（五）</p>
        		<p><input type="checkbox" name="item"/>选项（六）</p>
        		<p><input type="checkbox" name="item"/>选项（七）</p>
        		<p><input type="checkbox" name="item"/>选项（八）</p>
        		<p><input type="checkbox" name="item"/>选项（九）</p>
        		<p><input type="checkbox" name="item"/>选项（十）</p>
            </dd>
        </dl>
    </body>
    <script type="text/javascript">
        window.onload=function  () {
        	var oinput=document.getElementById("checkAll");
        	var oa=document.getElementsByTagName('a')[0];
        	var oitem=document.getElementsByName('item');
        	var ospan=document.getElementsByTagName('span')[0];
        	// 全选和全不选
        	oinput.onclick=function(){
        		for(var i=0;i<oitem.length;i++){
        			if(oinput.checked){
        				oitem[i].checked=true;
        		        ospan.innerHTML="全不选";
        			}
        		    else{
        		    oitem[i].checked=false;
        		    ospan.innerHTML="全选";	
        		    }

        		    
        		}    
        	}
        	//反选
        	oa.onclick=function(){
        		oinput.checked=false;
		        for(var i=0;i<oitem.length;i++){
		        	if(oitem[i].checked==true)
		        	oitem[i].checked=false;
		            else
		            oitem[i].checked=true;
		        }
		    }

        }
    </script>
</html>